<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../myCss/flex.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<style type="text/css">
			body {
				background-color: white;
			}
			
			.user {
				border-bottom: 1px solid #EFEFEF;
			}
			
			.user-left {
				display: inline-block;
				padding: 20px 20px 10px 2em;
			}
			
			.user-right {
				display: inline-block;
				/*float: right;*/
				text-align: center;
				/*padding: 20px 5em 10px 20px;*/
			}
			
			.mine-good {
				width: 50%;
				text-align: center;
				line-height: 50px;
				color: #000000;
			}
			
			.icon-size {
				font-size: 35px;
			}
			
			.articleContent {
				width: 100%;
				height: 200px;
				display: flex;
				/*background-image:url(../../images/banner/banner8.jpg);*/
				align-items: flex-end;
				border-bottom: 1px solid #EFEFEF;
			}
			.iconfont{
				color: #0099FF;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" style="background-color: #FFFFFF;">
			<div class="user">
				<div class="user-left">
					<!--<img id="userImg" src="../imgs/defaultImg.png" width="50px" style="border-radius: 50px;"/>-->
				</div>
				<div class="user-right">
					<p><span id="nickname" style="font-size: 1.2em;font-weight: bold;color: #000000;"></span></p>
					<p><span style="font-size: 1.2em;color:#0099FF">★一个经历丰富的钓鱼老油条★</span></p>
				</div>
			</div>
			<div class="flex-row" style="height: 50px;background-color:">
				<div id="shangpin" class="iconfont icon-wode icon-size mine-good" style="background-color: #EFEFEF;border-right: 1px solid #EFEFEF;"></div>
				<div id="raider" class="iconfont icon-raider icon-size mine-good" style=""></div> 
			</div>
			<ul id="market" class="mui-table-view" style="display: none;">
				<li class="mui-table-view-cell" style="padding: 0;">
				<div style="padding: 1em;">
					<p style="color: #000000;font-size: 1em;padding-bottom: 10px;font-weight: bold;">批发鱼竿</p>
					<div style="display: inline-block; font-size: 0.7em;border: 1px solid #0099FF;border-radius: 5px;padding: 2px;margin-left: 10px;">待交易</div>
					<p><span>碳素抄网杆 抄网杆 竞技抄网杆 渔具用品品批发</span></p>
					<p style="color: #0099FF;margin-top: 1em;"><span>来自</span><span>海南海口</span></p>
					<p style="color: red;font-size: 1.2em;float: right;margin-right: 2em;margin-top: 0em;padding-bottom: 1em;"><span>￥</span><span>66</span></p>
				</div>
				</li>
			</ul>
			<ul id="strategy" class="mui-table-view" style="background-image: url(images/GL.jpg);">
				<li class="articleContent">
				<div style="margin-left: 1em;margin-bottom: 0.3em;color: #fff;font-weight: bold;">海钓技巧有哪些</div>
				</li>
			</ul>
		</div>
		<script id="showJs" type="text/html">
		</script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../myJs/ajax.js"></script>
		<script type="text/javascript" src="../myJs/template.js"></script>
		<script type="text/javascript">
			mui.init();
			//查看商品详细信息
			mui("#market").on("tap", "li", function() {
				var status = this.dataset.status;
				var publisher = this.dataset.publisher;
				mui.openWindow({
					url: "indexContent/fleaMarket/marketDetailed.html",
					id: "markerDetailed", 
				})
			});
			mui("#strategy").on("tap", "li", function() {
				var status = this.dataset.status;
				var publisher = this.dataset.publisher;
				mui.openWindow({
					url: "indexContent/strategy/articleContent.html",
					id: "articleContent",
				})
			});
			//随机背景图片
			function Img() {
				var m = 10; //随机显示图片的总数量
				var n = Math.floor(Math.random() * m + 1)
				var articleImg = document.querySelectorAll(".articleContent");
				for(var i = 0; i < articleImg.length; i++) {
					articleImg[i].style.backgroundImage = "url(images/banner/banner3.jpg)";
				}
			}
			//获取攻略列表
			function getContList() {
				ajaxPost("/api/v1/articles/page", {
					"page": {
						"pageNo": "1",
						"pageSize": "10"
					}
				}, function(data) {
					if(data.code == 0) {
						showArtical(data.data.list);
						//						console.log(JSON.stringify(data.data.list));
					}
				}, function(err) {
					console.log(JSON.stringify(err));
				})
			}
			//列表渲染
			function showArtical(artical) {
				var articalList = [];
				//									console.log(JSON.stringify(artical));
				mui.each(artical, function(index, item) {
					if(item.publisher == userId) {
						articalList.push({
							id: item.id,
							title: item.title
						})
					}
				})

				var showUl = document.getElementById("showUl");
				showUl.innerHTML = template("articleJs", {
					datas: articalList
				});
				Img();
			}
			//			选择查看
			mui(".flex-row").on("tap", ".mine-good", function() {
				var icoList = document.querySelectorAll(".iconfont");
				for(var i = 0; i < icoList.length; i++) {
					icoList[i].style.backgroundColor = "#FFFFFF";
				}
				document.getElementById(this.id).style.backgroundColor = "#EFEFEF";

				if(this.id == "raider") {
					strategy.style.display="none";
					market.style.display="block";
				} else {
					strategy.style.display="block";
					market.style.display="none";
				}
			})
			var userId = null;
			var _self = null;
			var strategy=document.getElementById("strategy");
			var market=document.getElementById("market");
			mui.plusReady(function() {
				strategy.style.display="block";
				market.style.display="none";
			})
		</script>

	</body>

</html>